<script setup>
import "@material/web/ripple/ripple";
import "@material/web/focus/md-focus-ring.js";

const props = defineProps(["today", "selected", "outsideMonth"]);
const emit = defineEmits(["click"]);
</script>

<template>
  <td class="day-item body-large"
    :class="{ today: today !== undefined, selected: selected !== undefined, outsideMonth: outsideMonth !== undefined }"
    tabindex="0" @click="$emit('click')">
    <slot></slot>
    <md-ripple></md-ripple>
    <md-focus-ring></md-focus-ring>
  </td>
</template>

<style scoped>
.day-item {
  display: block;
  box-sizing: border-box;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  position: relative;
  user-select: none;
  border: none;
  padding: 0;
  outline: none;
  color: var(--md-sys-color-on-surface);
  transition-property: color, background-color;
  transition-duration: var(--md-sys-motion-duration-medium1);
  transition-timing-function: var(--md-sys-motion-easing-standard);
}

.day-item.today {
  border: solid 1px var(--md-sys-color-primary);
}

.day-item.selected {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.day-item.outsideMonth {
  color: var(--md-sys-color-on-surface-variant);
}
</style>